<template>
<div class="container">
    <!-- 通过父组件传的值 来判断这一部分是显示还是隐藏，
    目的是当点击了可领优惠券的时候，这一部分隐藏，
    当点击了我的优惠券的时候，这一部分显示,传的值为isShow -->
    <div class="topicChoice" v-show="isShow">
        <div @click="btnClick($event)" :class="{activeClass:fontColor.font1}">未使用</div>
        <div @click="btnClick($event)" :class="{activeClass:fontColor.font2}">已使用</div>
        <div @click="btnClick($event)" :class="{activeClass:fontColor.font3}">已过期</div>
    </div>
    <div class="ticketMode">
        <can-ticket-mode></can-ticket-mode>
    </div>
</div>
</template>

<script>
// 引入单个优惠券的模块
import CanTicketMode from '../../commentCompontents/canTicketMode'
export default {
    name: "TicketList",
    components:{
        CanTicketMode,
    },
    data() {
        return {
            fontColor: {
                font1: false,
                font2: false,
                font3: false,
            }
        }

    },
    props: {
        isShow: Boolean,
    },
    methods: {
        // 测试函数主要是为了测试各种数据
        // test(){
        //     console.log(isShow);
        // },
        btnClick(e) {
            
            console.log(e.target.innerHTML);
            let domInnerHTML = e.target.innerHTML;
            // 判断点击的元素是哪一个，给该元素配置class=activeClass 其他元素不配置
            switch (domInnerHTML) {
                case '未使用':
                    this.fontColor.font1 = true;
                    this.fontColor.font2 = false;
                    this.fontColor.font3 = false;
                    break;
                case '已使用':
                    this.fontColor.font1 = false;
                    this.fontColor.font2 = true;
                    this.fontColor.font3 = false;
                    break;
                case '已过期':
                    this.fontColor.font1 = false;
                    this.fontColor.font2 = false;
                    this.fontColor.font3 = true;
                    break;
            }
        }
    },
    mounted() {
        // this.btnClick();
        
    },
    
}
</script>

<style scoped>
.container {
    width: 100%;
    
}

.activeClass {
    font-weight: 900;
    color: #4AA4FC;
}

.topicChoice {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 1.2rem;
    border-bottom: 1px solid #eee;
    font-size: .4rem;
}
</style>
